<template>
	<view class="login">
		<view class="loginWarp"> 
			<h1>信息修改</h1>
			<!-- <p style="color:red">用户名数据，谨慎修改</p> -->
			<input type="number" placeholder="请输入电话号码" v-model:value="registerData.phone" disabled="true" style="color: gray;">
			<input type="text" placeholder="请输入用户名" v-model:value="registerData.user">
			<input type="password" placeholder="请输入密码" v-model:value="registerData.password">
			<input type="password" placeholder="请重复密码" v-model:value="registerData.repassword">
			<view class="uPImg" id="logo">
				<view class="Img">*更换头像 :</view>
				<!-- 上传图片 -->
				<view class="shangchuan">
				    <view class="sc2" v-for="(item, index) in registerData.logo" :key="index">
				        <!-- <image class="del" @click="del(index)" src="https://longyugou.top:8008/small/add.png" mode=""></image> -->
				        <image class="Img3" :src="item" mode=""></image>
				    </view>
				    <view class="sc2" v-if="registerData.logo.length < 1" @click="upload(1)">
						<image class="sc3" src="https://longyugou.top:8008/small/add.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="uPImg" id="bgmimg">
				<view class="Img">*更换背景 :</view>
				<!-- 上传图片 -->
				<view class="shangchuan">
				    <view class="sc2" v-for="(item, index) in registerData.bgmimg" :key="index">
				        <!-- <image class="del" @click="del(index)" src="https://longyugou.top:8008/small/add.png" mode=""></image> -->
				        <image class="Img3" :src="item" mode=""></image>
				    </view>
				    <view class="sc2" v-if="registerData.bgmimg.length < 1" @click="upload(2)">
						<image class="sc3" src="https://longyugou.top:8008/small/add.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="">
				{{ vailData }}
			</view>
			<button type="primary" @click="handleLogin(registerData)">提交</button>
		</view>
	</view>
</template>

<script>
	import { UpdateUsers,selectUsers } from "@/api/index.js"
	export default {
		data() {
			return {
				showLogin: true,
				vailData: '',
				temImgList: [],
				temLogo: [],
				// loginData: {
				// 	user: '',
				// 	password: '',
				// },
				registerData: {
					user: '',
					phone: '',
					password: '',
					repassword: '',
					logo: [],
					bgmimg: []
				}
			}
		},
		onLoad(data) {
			this.registerData.phone = data.code
		},
		methods: {
			async handleLogin(data){
				data.logo = this.temLogo;
				data.bgmimg = this.temImgList;
				// console.log(this.showLogin);
				this.handleVail(data);
				let url = null;
				let showTitle = null;
				// console.log('ddd');
				let res = await UpdateUsers(data);
				if(res.data.code === 1000){
					url = "/pages/index/index"
					uni.setStorageSync("users",data.user)
				}
				uni.switchTab({
					url: url
				})
			},
			handles() {
				this.showLogin = !this.showLogin
			},
			//输入框校验
			handleVail(data){
				if(data.user === '' || data.password === ''){
					this.vailData = '输入框不可为空'
					return
				} else if(data.phone && data.phone === '' || data.repassword === ''){
					this.vailData = '输入框不可为空'
					return
				} else if(data.repassword && data.repassword !== data.password){
					this.vailData = '密码不一致'
					return
				} else if(data.phone && !this.checkPhone()){
					this.vailData = '请输入有效的号码！';
					return
				} else {
					this.vailData = ''
				}
			},
			//电话号码验证
			checkPhone() {
			      let tel = /^0\d{2,3}-?\d{7,8}$/;
			      let phone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
			      if(this.registerData.phone.length == 11){//手机号码
			        if(phone.test(this.registerData.phone)) {
			          return true;
			        } else {
						return false
					}
			      }else if(this.registerData.phone.length == 13 && this.registerData.phone.indexOf("-") != -1 ){//电话号码
			        if(tel.test(this.registerData.phone)) {
			          console.log(this.registerData.phone);
			          return true;
			        } else {
						return false
					}
			      } else {
					  return false
				  }
			    },
				upload(data) {
					let that = this;
					uni.chooseImage({
						count: 3, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						loop: true,
						success: res => {
							console.log(res);
							if (res.tempFilePaths.length != 0) {
								if(data === 1){
									this.registerData.logo.push(res.tempFilePaths[0]);
								} else if(data === 2) {
									this.registerData.bgmimg.push(res.tempFilePaths[0]);
								}
							}
					 	// console.log(JSON.stringify(res.tempFilePaths));
							var tempFilePaths = res.tempFilePaths;
							 
							// console.log(tempFilePaths);
							// console.log(tempFilePaths[0]);
							uni.uploadFile({
								url: 'https://longyugou.top/upload',
								filePath: tempFilePaths[0],
								name: 'file',
								success: uploadFileRes => {
									console.log('上传图片', JSON.parse(uploadFileRes.data).url);
									if (uploadFileRes) {
										if(data === 1){
											that.temLogo.push(JSON.parse(uploadFileRes.data).url);
										} else if(data === 2) {
											that.temImgList.push(JSON.parse(uploadFileRes.data).url);
										}
									}
								},
								fail(err) {
									console.log(err);
								}
							});
						}
					});
				},
		}
	}
</script>

<style scoped lang="scss">
	page {
		height: 100%;
	}
	.login {
		height: 100vh;
		background: linear-gradient(#AD5389,#3C1053);
		display: flex;
		align-items: center;
		justify-content: center;
	}
.loginWarp {
	width: 60%;
	background-color: #fff;
	padding: 80rpx;
	text-align: center;
}
.loginWarp input {
	margin: 20rpx 0;
	background: antiquewhite;
	padding: 20rpx;
	/* border-radius: 20rpx; */
}
.toResiger {
	margin: 50rpx 0;
	color: red;
}.shangchuan {
	width: 90%;
	height: 150rpx;
	/* margin: 0 auto; */
	display: flex;
	/* align-items: center; */
	.sc2 {
		width: 30%;
		height: 90%;
		border-radius: 10rpx;
		background-color: #dadfef;
		/* text-align: center; */
		line-height: 200rpx;
		/* margin: 0 10rpx; */
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
	.Img3 {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	.del {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		z-index: 1000;
		top: 0rpx;
		right: 0;
	}
	.sc3 {
		width: 96rpx;
		height: 96rpx;
		border-radius: 10rpx;
	}
}
</style>
